<template>
  <view class="page">
    <view class="base">
      <u-text
        text="金额"
        prefix-icon="rmb-circle-fill"
        icon-style="font-size: 28rpx; color: #3BA199; margin-right: 20rpx"
        lines="1"
        line-height="100rpx"
        color="#555555"
        size="28rpx"
      />
      <u-input
        v-model="price"
        placeholder="请输入金额"
        font-size="28rpx"
        input-align="right"
        maxlength="10"
        :placeholder-style="placeholderStyle"
        border="none"
        @change="handleChange"
      />
    </view>
    <view class="base">
      <u-text
        text="优惠券"
        prefix-icon="coupon-fill"
        icon-style="font-size: 28rpx; color: #EC9B51; margin-right: 20rpx"
        lines="1"
        line-height="100rpx"
        color="#555555"
        size="28rpx"
      />
      <view @click="handleCoupon">
        <u-input
          v-model="coupon.name"
          disabled
          disabled-color="#ffffff"
          :placeholder="couponList.length > 0 ? '请选择优惠券' : '暂无优惠券'"
          font-size="28rpx"
          input-align="right"
          suffix-icon="arrow-right"
          suffix-icon-style="color: #909399; font-size: 28rpx"
          :placeholder-style="placeholderStyle"
          border="none"
        />
      </view>
    </view>
    <view class="btn">
      <view class="center-btn" @click="handlePay"> 提交订单 </view>
    </view>
    <Coupon-popup
      v-model="couponShow"
      :list="couponList"
      @close="closeCoupon"
      @confirm="confirmCoupon"
    />
  </view>
</template>

<script>
import CouponPopup from "@/pages/home/cp/CouponPopup";

import { homePartyDetail, homeAddOrder } from "@/request/homeApi.js";
import { mallCoupon } from "@/request/mallApi.js";
export default {
  components: { CouponPopup },
  data() {
    return {
      goodsId: 0, // 店铺id
      coupon: {}, // 优惠券信息
      couponShow: false, // 优惠券弹窗
      couponList: [], // 优惠券列表
      price: 0, // 金额
      placeholderStyle: {
        fontSize: "28rpx",
        color: "#D9D9D9",
      },
    };
  },
  onLoad(e) {
    this.goodsId = e.id;
    this.getData(e.id);
  },
  methods: {
    // 获取详情
    getData(id) {
      homePartyDetail({ id }).then((res) => {
        if (res.code == 1) {
          uni.setNavigationBarTitle({ title: `${res.data.shopname}收银台` });
        }
      });
    },
    // 打开优惠券弹窗
    handleCoupon() {
      this.couponShow = true;
    },
    // 关闭优惠券弹窗
    closeCoupon() {
      this.couponShow = false;
    },
    // 选择优惠券
    confirmCoupon(v) {
      if (v.type == "reduction") {
        v.name = `满${Number(v.limit)}减${Number(v.price)}`;
      }
      if (v.type == "discount") {
        v.name = `满${Number(v.limit)}打${Number(v.discount)}折`;
      }
      if (v.choice) {
        this.coupon = v;
      } else {
        this.coupon = { name: "" };
      }
      this.couponShow = false;
    },
    // 金额改变
    handleChange() {
      this.coupon = { name: "" };
      if (isNaN(this.price)) {
        uni.showToast({ title: "请输入正确的金额", icon: "none" });
        this.couponList = [];
      } else {
        this.getCouponList();
      }
    },
    // 获取优惠券列表
    getCouponList() {
      let data = {
        shop_id: 0, // 不需要指定店铺
        goods_id: this.goodsId,
        shop_category_id: null,
        price: parseFloat(this.price),
      };
      this.couponList = [];
      mallCoupon(data).then((res) => {
        if (res.code == 1) {
          this.couponList = res.data;
        }
      });
    },
    // 提交订单
    handlePay() {
      this.$author(() => {
        let data = {
          id: this.goodsId,
          type: "party",
          money: this.price,
          coupon_id: this.coupon?.id,
          number: 1,
        };
        homeAddOrder(data).then((res) => {
          if (res.code == 1) {
            let { list, token } = res.data;
            uni.redirectTo({
              url: `/pages/mall/cashier?token=${token}&data=${JSON.stringify(list)}`,
            });
          }
        });
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.page {
  padding: 20rpx;
  .base {
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }
  .btn {
    position: fixed;
    background-color: #fff;
    box-shadow: 0 0 8rpx rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    height: 126rpx;
    padding: 20rpx;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9;
    .center-btn {
      width: 100%;
      height: 80rpx;
      line-height: 80rpx;
      font-size: 28rpx;
      text-align: center;
      color: $active-color;
      background-color: #cee7e5;
      border-radius: 40rpx;
    }
  }
}
</style>
